<template>
  <div class="container-group-question-list">
    <el-card>
      <!-- 筛选 -->
      <div class="filter-box">
        <el-row>
          <el-col ref="form" :span="18">
            <el-form inline label-width="80px">
              <el-form-item label="关键字">
                <el-input
                  v-model="keyWords.id"
                  placeholder="根据编号搜索"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button @click="search" size="small" type="primary"
              >搜索</el-button
            >
            <el-button @click="clear" size="small">清除</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 总计 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 10px"
      ></el-alert>
      <!-- 表格 -->
      <el-table :data="groupQuestion" stripe style="width: 100%">
        <el-table-column width="220px" label="编号" prop="id"></el-table-column>
        <el-table-column width="80px" label="题型">
          <template slot-scope="scope">
            <div v-if="scope.row.questionType === '1'">{{ "单选" }}</div>
            <div v-if="scope.row.questionType === '2'">{{ "简答" }}</div>
            <div v-if="scope.row.questionType === '3'">{{ "多选" }}</div>
          </template>
        </el-table-column>  

        <el-table-column width="220px" label="题目编号">
          <template slot-scope="scope"
            ><el-link
              v-for="item in scope.row.questionIDs"
              :key="item.number"
              type="primary"
              :underline="false"
              @click="showQPreview(item.id)"
              >{{ item.number }}</el-link
            ></template
          >
        </el-table-column>

        <el-table-column
          width="180px"
          label="录入时间"
          prop="addTime"
        ></el-table-column>
        <el-table-column
          width="167px"
          label="答题时间(s)"
          prop="totalSeconds"
        ></el-table-column>
        <el-table-column
          width="165px"
          label="正确率(%)"
          prop="accuracyRate"
        ></el-table-column>
        <el-table-column
          width="165px"
          label="录入人"
          prop="userName"
        ></el-table-column>
        <el-table-column width="80px" label="操作">
          <template #default="{ row }">
            <el-button
              @click="delClick(row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
              plain
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pager"
        @current-change="changePage"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="keyWords.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="changeSize"
        :current-page="keyWords.page"
      >
        >
      </el-pagination>
    </el-card>

    <!-- 题目弹层 -->
    <QuestionsPreview
      :show-qp-dialog.sync="showQpDialog"
      :subject-id="subjectid"
    />
  </div>
</template>

<script>
import {
  randoms as questionsRandoms,
  removeRandoms as questionremoveRandoms,

} from "@/api/hmmm/questions.js";
export default {
  name: "groupQuestionList",
  data() {
    return {
      keyWords: {
        id: null,
        page: 1,
        pagesize: 20,
      },
      // 组题列表
      groupQuestion: [],
      total: 0,
      showQpDialog: false, // 题目弹层
    };
  },
  created() {
    this.getQuestionsList();
  },
  methods: {
    async getQuestionsList() {
      const { data } = await questionsRandoms(this.keyWords);
      // console.log(data);
      this.groupQuestion = data.items;
      this.total = data.counts;
    },
    // 清除
    clear() {
      this.keyWords.id = null;
    },
    // 搜索
    search() {
      this.keyWords.pagesize = 1;
      this.getQuestionsList();
    },
    // 分页
    changePage(newPage) {
      this.keyWords.page = newPage;
      this.getQuestionsList();
    },
    // 改尺码
    changeSize(newSize) {
      this.keyWords.page = 1;
      this.keyWords.pagesize = newSize;
      this.getQuestionsList();
    },
    delClick(id) {
      this.$confirm("此操作将永久删除该题组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await questionremoveRandoms({ id });
          this.$message.success("删除成功");
          this.getQuestionsList();
        })
        .catch((a) => {});
    },
    showQPreview(id) {
      this.subjectid = id
      this.showQpDialog = true
    },
  },
};
</script>

<style scoped lang="scss">
.container-group-question-list {
  padding: 10px;
  .el-button {
    float: right;
    margin-right: 10px;
  }
  .pager {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
  .one {
    padding-bottom: 20px;
  }
}
</style>
